<script setup lang="ts">
import { listMediaBasicInfos } from '@/api/creative/smart-media/media-manager'
import UploadFile from './upload-file.vue'
import MediaItem from './media-item.vue'

const config = reactive({
  multiple: true,
  mediaType: 'Video'
})

// 素材文件列表
const mediaList = ref<any[]>([])
const mediaVideoList = computed(() => mediaList.value.filter((item) => item.mediaType === 'video'))
const mediaAudioList = computed(() => mediaList.value.filter((item) => item.mediaType === 'audio'))
const mediaImageList = computed(() => mediaList.value.filter((item) => item.mediaType === 'image'))
const mediaCheckedList = computed(() => mediaList.value.filter((item) => item.checked))
listMediaBasicInfos({}).then((res) => {
  mediaList.value = res.mediaInfos.map((mediaInfo) => {
    const {
      mediaId,
      mediaBasicInfo: { mediaType, coverURL, inputURL, title }
    } = mediaInfo

    return {
      mediaId: mediaId,
      mediaType: mediaType,
      coverURL: coverURL || inputURL,
      title: title,
      origin: markRaw(mediaInfo),
      checked: false
    }
  })
})

/** 上传文件 */
const uploadFileRef = ref<InstanceType<typeof UploadFile>>()
const handleUploadFileClick = () => {
  uploadFileRef.value?.open()
}

// 顶部分类标签栏
const activeTab = ref('all')
const tabs = [
  {
    label: '全部',
    name: 'all',
    dataList: mediaList
  },
  {
    label: '视频',
    name: 'video',
    dataList: mediaVideoList
  },
  {
    label: '音频',
    name: 'audio',
    dataList: mediaAudioList
  },
  {
    label: '图片',
    name: 'image',
    dataList: mediaImageList
  }
]

const visible = ref(false)
/** 打开素材搜索抽屉 */
let resultResolve: null | ((mediaInfos: any[]) => void) = null
function open(data?: { multiple: boolean; mediaType: 'Video' | 'Audio' | 'Image' }) {
  config.multiple = data?.multiple ?? true
  config.mediaType = data?.mediaType ?? 'Video'
  return new Promise((resolve) => {
    activeTab.value = config.mediaType.toLowerCase()
    visible.value = true
    resultResolve = resolve
  })
}

/** 取消按钮点击 */
function onCancelClick() {
  visible.value = false
}

/** 确认按钮事件 */
function onConfirmClick() {
  resultResolve?.(
    mediaCheckedList.value.map((item) => {
      item.checked = false
      return item.origin
    })
  )
  visible.value = false
}

function checkMedia(mediaId: string) {
  if (!config.multiple) {
    mediaList.value.forEach((item) => {
      item.checked = false
    })
  }
  const media = mediaList.value.find((item) => item.mediaId === mediaId)
  if (media) media.checked = !media.checked
}

/** 暴露方法 */
defineExpose({
  open
})
</script>

<template>
  <!-- 添加一个element的drawer -->
  <el-drawer v-model="visible" direction="rtl" size="50%">
    <template #title>
      <div class="flex justify-between items-center">
        <span class="text-lg">添加素材</span>
        <el-button class="mr-4" @click="handleUploadFileClick" type="primary">上传素材</el-button>
      </div>
    </template>

    <template #default>
      <!-- 顶部分类标签栏：全部、视频、音频、图片 -->
      <el-tabs v-model="activeTab" type="card">
        <el-tab-pane v-for="tab in tabs" :key="tab.name" :label="tab.label" :name="tab.name">
          <div class="grid grid-cols-4 gap-4 pb-4">
            <MediaItem
              v-for="item in tab.dataList.value"
              :key="item.mediaId"
              :title="item.title"
              :duration="item.duration"
              :cover="item.coverURL"
              v-model:checked="item.checked"
              @click="checkMedia(item.mediaId)"
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </template>

    <template #footer>
      <div class="flex justify-end items-center">
        <div class="flex-grow text-left"
          >已选择
          <span class="text-blue-500 text-lg font-bold">{{ mediaCheckedList.length }}</span>
          个文件</div
        >
        <el-button @click="onCancelClick">取消</el-button>
        <el-button type="primary" @click="onConfirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>

  <UploadFile ref="uploadFileRef" />
</template>
